<template>
    <InfoCard>
        <template #header v-if="payInfo.item.type?.typeDescribe">
            <div class="text-center" v-html="payInfo.item.type?.typeDescribe"></div>
        </template>
        <template #content>
            <div style="text-align: center;" v-if="payInfo.item.type?.typeEditor">
                <VanForm>
                    <CellGroup>
                        <Field :key="item.id" v-for="(item, index) in payInfo.item.type?.typeEditor" :label="item.title"
                            :placeholder="item.value || '请输入内容'" :name="'typevalue' + index" v-model="typeValue[index]">
                        </Field>
                    </CellGroup>
                </VanForm>
                <Button @click="submitType" style="padding: 2px 8px;" size="small" :color="payInfo.theme">{{
                    payInfo.item.type?.typeButton }}</Button>
            </div>
        </template>
    </InfoCard>
</template>

<script setup lang="ts">
import InfoCard from './InfoCard.vue';
import request from '@/utils/request';
import { ref } from 'vue'
import { Button, showNotify, Field, CellGroup, Form as VanForm } from "vant";

const typeValue = ref([]);
const props = defineProps({
    payInfo: {
        type: Object,
        default: () => ({})
    }
});

function submitType() {
    if (typeValue.value.length === 0) {
        return;
    }

    const params = [];
    typeValue.value.forEach(item => {
        params.push(item)
    })

    request.post('/api/orderCheckIn/displayData', {
        orderNo: props.payInfo.orderNo,
        input: params
    }).then(res => {
        if (res.data.code === 1) {
            showNotify({ type: 'success', message: '提交成功' })
        } else {
            showNotify({ type: 'danger', message: '提交失败' })
        }
    })
}
</script>